<template>
  <div class="content-box">
    <div class="content-title">
      <h1>所有文章</h1>
      <a-button type="primary" shape="round" size="20" @click="getAllArticle">
        <template #icon>
          <reload-outlined />
        </template>
        刷新
      </a-button>
    </div>
    <a-divider />
    <div v-for="item in list" :key="item.id" class="article">
      <a-card :hoverable="true" :title="item.title" :head-style='hstyle'>
        <template #extra><span class="date">{{ dateFormat(item.time) }}</span></template>
        <div class="article-content">
          {{ item.summary }}
        </div>
        <template #actions>
          <div class="actions-tag">
            <a-tag v-for="tag in item.tags" :key="tag" color="green">
              {{ tag }}
            </a-tag>
          </div>
          <div class="actions-btn">
            <a-button type="primary" size="large" color="green" @click="enterDetail(item.id)">
              <template #icon>
                <read-outlined />
              </template>
              阅读详情
            </a-button>
          </div>
        </template>
      </a-card>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, nextTick, ref, onMounted } from 'vue';
import { useRouter } from "vue-router"
import { ReloadOutlined, ReadOutlined } from '@ant-design/icons-vue';
import { getArticles } from "@/api/article"
export default defineComponent({
  name: "AllArticle",
  components: {
    ReloadOutlined,
    ReadOutlined,
  },
  setup() {
    const list: any = ref([])
    const router = useRouter()
    function getAllArticle(){
      getArticles({
        pageSize: 100,
        page: 0
      }).then(res => {
        res.data.forEach((item: any) => item.tags = item.tags.split(','))
        list.value = res.data
      })
    }
    onMounted(() => {
      getAllArticle()
    })
    function dateFormat(str: string): string {
      return str.split(' ')[0].toString()
    }
    function enterDetail(id: number) {
      router.push({
        path: "/article/detail",
        query: {
          id
        }
      })
    }

    return {
      list,
      hstyle: {
        "font-size": "18px", "color": "#F0BEE6", "flex": "0", "font-weight": "bold", "text-align": "left"
      },
      dateFormat,
      enterDetail,
      getAllArticle
    }
  }
});

</script>

<style lang="less">
.content-box {
  margin: 0px 25% 30px 10%;
  padding-top: 20px;

  .content-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-size: large;
    font-weight: bold;
  }

  .article {
    margin: 10px 0;

    .date {
      color: rgba(150, 150, 150, .7);
    }

    .article-content {
      text-align: left;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .actions-tag {
      height: 40px;
      text-align: left;
      display: flex;
      align-items: center;
      padding: 0 20px;
    }

    .actions-btn {
      text-align: right;
      padding: 0 20px;
    }
  }
}
</style>